<template>
  <div class="record">
    <div class="recordDrawer-box">
        <el-button-group>
            <el-button type="primary" :class="recordBtnState==1?'isActive':''" @click="ckCondition">条件更改</el-button>
            <el-button type="primary" :class="recordBtnState==2?'isActive':''" @click="ckDemand">需求更改</el-button>
            <el-button type="primary" :class="recordBtnState==3?'isActive':''" @click="ckStep">流程更改</el-button>
        </el-button-group>
    </div>

    <!-- 条件更改 -->
    <div class="record-main" v-if="recordBtnState==1">
        <ul>
            <li v-for="(term,i) in termRecord" :key="i">
                <h3>
                    <p><i></i>第{{getHanzi(i+1)}}次更改</p>
                    <p>{{term.createTime}}</p>
                </h3>
                <p v-for="(child,k) in term.children" :key="k">
                    {{child.createName}}
                    {{getChangeType(child)}}
                    {{getName(child)}}
                </p>
            </li>
        </ul>
    </div>
    <!-- 需求更改 -->
    <div class="record-main" v-else-if="recordBtnState==2">
        <ul>
            <li v-for="(term,i) in needRecord" :key="i">
                <h3>
                    <p><i></i>第{{getHanzi(i+1)}}次更改</p>
                    <p>{{term.createTime}}</p>
                </h3>
                <p v-for="(child,k) in term.children" :key="k">
                    {{child.createName}}
                    {{getChangeType(child)}}
                    {{getName(child)}}
                </p>
            </li>
        </ul>
    </div>
    <!-- 流程更改 -->
    <div class="record-main" v-else>
        <ul>
            <li v-for="(term,i) in flowRecord" :key="i">
                <h3>
                    <p><i></i>第{{getHanzi(i+1)}}次更改</p>
                    <p>{{term.createTime}}</p>
                </h3>
                <p v-for="(child,k) in term.children" :key="k">
                    {{child.createName}}
                    {{getChangeType(child)}}
                    {{getName(child)}}
                </p>
            </li>
        </ul>
    </div>

  </div>
</template>

<script>
import {changeRecord,changeRecordType,TurnChinese} from "@/wss/utils/wss.js";
import { getProjectGetInfoApi } from "@/wss/newApi_3-24/doc/project.js"
export default {
    props:{
        orderInfo: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    data(){
        return{
            recordBtnState:1,//1条件更改 2需求更改 3流程更改
            termRecord: [],//条件记录
            needRecord: [],//需求记录
            flowRecord: [],//流程记录
        }
    },
    mounted(){
        this.getProjectGetInfo() // 获取项目的信息
    },
    watch:{
        //监控当切换的时候重新唤起项目的信息
        orderInfo(newValue,oldValue){
            this.getProjectGetInfo() // 获取项目的信息
        },
    },
    methods:{
        // 获取项目的信息
        async getProjectGetInfo(){
            let result = await getProjectGetInfoApi({id:this.orderInfo.goodsId})
            if(result.code == 200){
                // 当前项目有更改记录的时候才过滤
                if(result.data.changeHistories){
                    // 条件记录 1 条件 2 需求 3 流程
                    let termRecord = result.data.changeHistories.filter(itme=>{
                        return itme.type == "1"
                    })
                    let termTime = changeRecord(termRecord)//先根据createTime分组
                    termTime.forEach(item => {
                        item.children = changeRecordType(item.children);//然后根据changeType分组
                    });
                    this.termRecord = termTime

                    // 需求记录 1 条件 2 需求 3 流程
                    let needRecord = result.data.changeHistories.filter(itme=>{
                        return itme.type == "2"
                    })
                    let needTime = changeRecord(needRecord)//先根据createTime分组
                    needTime.forEach(item => {
                        item.children = changeRecordType(item.children);//然后根据changeType分组
                    });
                    this.needRecord = needTime

                    // 流程记录 1 条件 2 需求 3 流程
                    let flowRecord = result.data.changeHistories.filter(itme=>{
                        return itme.type == "3"
                    })
                    let flowTime = changeRecord(flowRecord)//先根据createTime分组
                    flowTime.forEach(item => {
                        item.children = changeRecordType(item.children);//然后根据changeType分组
                    });
                    this.flowRecord = flowTime
                }else{
                    this.termRecord= []//条件记录
                    this.needRecord= []//需求记录
                    this.flowRecord= []//流程记录
                }
            }
        },

        //点击条件更改
        ckCondition(){
            this.recordBtnState=1
        },
        //点击需求更改
        ckDemand(){
            this.recordBtnState=2
        },
        //点击流程更改
        ckStep(){
            this.recordBtnState=3
        },

        // 获取更改记录第几次的中文
        getHanzi(val){
          return TurnChinese(val)
        },
        
        // 获取更改记录的类型
        getChangeType(child){
          if(child.changeType == "1"){
            return '增加了'
          }else if(child.changeType == "2"){
            return '编辑了'
          }else if(child.changeType == "3"){
            return '删除了'
          }
        },
        
        // 获取更改记录的名称
        getName(child){
          let name = ''
          child.children.forEach(item=>{
            name = name +' '+ item.newName
          })
          return name +' '+ child.children.length +'个条件'
        },

    },
}
</script>

<style scoped>
h3,h4,p,ul,li{
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd20{
  padding: 0 20px;
}
/* 更改记录的样式 */
.el-button-group .el-button{
  background-color: #F0F2F5;
  color: #2E3F5E;
  border: 1px solid #F0F2F5;
  padding: 10px 15px;
}
.el-button-group .el-button.isActive{
  background-color: #fff;
  color: #F87A23;
  font-weight: bold;
}
.record{
    font-size: 12px;
    cursor: pointer;
}
.recordDrawer-box{
    padding: 0 20px;
}
.recordDrawer-box .el-button-group{
    width: 100%;
}
.recordDrawer-box .el-button-group .el-button{
    width: 33%;
}
.record-main{
    padding: 0 20px;
}
.record-main li{
    position: relative;
}
.record-main li>h3{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #909AAA;
    margin-top: 15px;
    margin-bottom: 15px;
}
.record-main li::before{
    content: '';
    position: absolute;
    left: 1.5px;
    top: 10px;
    display: block;
    width: 1px;
    height: 115%;
    background-color: #EFEFEF;
}
.record-main li>h3 i{
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #909AAA;
    margin-right: 5px;
}
.record-main li>h3>p:first-child{
    display: flex;
    align-items: center;
}
.record-main li>h3>p:last-child{
    font-size: 12px;
    font-weight: 400;
    color: #909AAA;
}
.record-main li>p{
    margin-left: 10px;
    font-size: 12px;
    line-height: 26px;
    font-weight: 400;
    color: #2E3F5E;
}
.record-main li:last-child::before{
    display: none;
}
/* 更改记录的样式 end */
</style>